<template>
  <div class="MUser-Password-InputBox">
    <el-radio-group v-model="passwordType" size="small" class="mr-1">
      <el-radio-button :label="0">初始密码</el-radio-button>
      <el-radio-button :label="1">自定义密码</el-radio-button>
    </el-radio-group>
    <el-popover
      v-if="passwordType == 0"
      placement="top-start"
      width="200"
      trigger="hover"    
      content="初始密码请联系管理员获取"
    >
      <template #reference>
        <el-button type="text">
          <i class="el-icon-question grey"></i>
        </el-button>
      </template>
    </el-popover>

    <div v-show="passwordType == 1">
        <div class="form_box__item mt-2">
          <div class="form_box__item__input">
            <el-input
              v-model="password"
              type="password"
              placeholder="请填写密码"
              ref="input_password"
              show-password
            >
              <template #prepend>新密码：</template>
            </el-input>
          </div>
        </div>

        <div class="form_box__item mt-2">
          <div class="form_box__item__input">
            <el-input
              v-model="rpassword"
              type="password"
              placeholder="请再次填写密码"
              ref="input_password"
              show-password
            >
              <template #prepend>再次输入新密码：</template>
          </el-input>
          <i class="el-icon-check success ml-2" v-show="correctPassword"></i>
          </div>
        </div>
    </div>

  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'MUserPasswordInput',

  components: {
    
  },

  data(){
    return {      
      passwordType : 0, // 密码类型 0 默认；1 自定义
      password : null, 
      rpassword : null,
      correctPassword: false
    }
  },

  methods:{
    init(){

    },
    checkPassword(){
      let iscorrect = false;

      if(this.password && this.rpassword && this.password === this.rpassword){
        iscorrect = true;
        this.correctPassword = iscorrect

        this.emitValue();
      }

      this.correctPassword = iscorrect
    },
    emitValue(){
      let data = {
        "ptype": this.passwordType,
        "password": this.password
      }

      console.log("emitValue",data,this.correctPassword)

      if(this.passwordType == 0){
        this.$emit("onDataChanged",data)
      }
      else if(this.passwordType == 1 && this.correctPassword){
        this.$emit("onDataChanged",data)
      }
    }
  },
  watch: {
    'password': function(){
      this.checkPassword();
    },
    'rpassword' : function(){
      this.checkPassword();
    },
    'passwordType': function(){
      this.emitValue();
    }
  },
  mounted(){
    console.log("muser")
  },

  setup(){
    // const store = useStore()

    // return {
    //   LoginByUsername:(userObj:any)=> store.dispatch('LoginByUsername')
    // }

  }


})


// @Component
// export default class Login extends BaseVue {
//   @Action("LoginByUsername", { namespace }) LoginByUsername: any;
//   username: string = "";
//   password: string = "";
//   error: string = "";
//   loading: boolean = false;
//   redirect: string = "";
//   isPhone = false;
//   getCodeText: any = "获取验证码";
//   changeText = "手机验证码登录";
//   userPhone = ""; //手机号
//   codeText = ""; //验证码
//   canClick = true;
//   $message: any;
//   $router: any;
//   $alert: any;
//   login() {
//     if (this.username == null || this.username.length == 0) {
//       this.error = "请填写用户名！";
//       return;
//     }

//     this.loading = true;

//     const lf = {
//       u: this.username,
//       p: this.password,
//     };
//     // this.$router.push({ path: '/' });
//     this.LoginByUsername(lf)
//       .then(() => {
//         store.commit("profileModule/DelTabsInfo", [
//           {
//             path: "/dashboard",
//             query: {},
//             title: "首页",
//           },
//         ]);
//         this.$router.push({ path: "/" });
//       })
//       .catch((error: any) => {
//         console.log(error);
//       })
//       .finally(() => {
//         this.loading = false;
//       });
//   }

//   // 使用手机验证码登陆
//   phoneLogin() {
//     let phone = this.userPhone;
//     if (!/^1[3456789]\d{9}$/.test(phone)) {
//       this.error = "手机号码有误，请重填！";
//       return false;
//     }
//     if (!this.codeText) {
//       this.error = "请输入验证码！";
//       return false;
//     }
//     let code = this.codeText;
//     let data = {
//       phone,
//       code,
//     };
//     phoneLoginApi(data)
//       .then((res: any) => {
//         if (res.code == 0) {
//           this.$message.error(res.message);
//         }
//       })
//       .catch((error) => {
//         console.log(error);
//       });
//   }

//   forget() {
//     this.$alert("请直接联系管理人员获得密码！", "忘记密码", {
//       showConfirmButton: false,
//       closeOnClickModal: true,
//     });
//   }
//   // 更改登录方式
//   changePage() {
//     this.isPhone = !this.isPhone;
//     this.error = "";
//     if (!this.isPhone) {
//       this.changeText = "手机验证码登录";
//     }
//     if (this.isPhone) {
//       this.changeText = "用户名密码登录";
//     }
//   }
//   // 获取验证码
//   getCode() {
//     let phone = this.userPhone;
//     let _this: any = this;
//     if (!/^1[3456789]\d{9}$/.test(phone)) {
//       this.error = "手机号码有误，请重填！";
//       return false;
//     }
//     if (this.canClick) {
//       this.canClick = false;
//       let phone = _this.userPhone;
//       // 验证码接口
//       getCodeApi(phone)
//         .then((res) => {
//           console.log(123, res);
//         })
//         .catch((error) => {
//           console.log(error);
//         });
//       this.getCodeText = 60;
//       let CodeInterval = setInterval(() => {
//         if (this.getCodeText > 0) {
//           this.getCodeText -= 1;
//         } else {
//           clearInterval(CodeInterval);
//           this.canClick = true;
//           this.getCodeText = "重新获取验证码";
//         }
//       }, 1000);
//     }
//   }

// }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

</style>
